<template>
  <div class="my-notice">
    <Search @search="handleSearch" v-slot="{ formData }">
      <el-form-item prop="readed" :label="$t('field.readed')">
        <el-select
          v-model="formData.readed"
          :placeholder="$tSelect()"
          style="width: 120px"
          clearable
        >
          <el-option
            v-for="item in $enumList('READ_STATUS')"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="keyword" :label="$t('field.keyword')">
        <el-input v-model="formData.keyword" :placeholder="$tInput()" />
      </el-form-item>
    </Search>
    <Table
      ref="table"
      :searchData="searchData"
      :service="services.search"
      @selection-change="handleSelectionChange"
    >
      <TableColumnEnum
        prop="readed"
        :label="$t('field.readed')"
        enumType="READ_STATUS"
      />
      <el-table-column prop="title" :label="$t('field.title')" />
      <el-table-column prop="createDate" :label="$t('field.date')" />
      <TableColumnAction v-slot="{ scope }" width="200">
        <el-button
          type="primary"
          size="mini"
          round
          @click="$router.push('/my-notice/detail/' + scope.row.id)"
          >{{ $t('action.detail') }}</el-button
        >
      </TableColumnAction>
    </Table>
  </div>
</template>

<script>
import { crudMixin } from 'mixins'
import { Search, Table, TableColumnEnum, TableColumnAction } from 'components'
import { getMyNotice } from 'services/notice'
export default {
  name: 'MyNotice',
  components: {
    Search,
    Table,
    TableColumnEnum,
    TableColumnAction
  },
  mixins: [crudMixin],
  data() {
    return {
      services: {
        search: getMyNotice
      }
    }
  }
}
</script>
